<template>
  <PublicPage class="fans_page" page-name="我的成员" :borderType="true" :showNav="true">
    <div class="fans_msg_box">
      <view class="order-title">
        <!-- 搜索 -->
        <SearchInput placeholder="搜索昵称" @searchFn="searchOrderInputFn" v-if="searchInputType"/>
        <!-- 标签切换 -->
        <view class="u-tabs_box">
          <u-tabs
            active-color="#E44435"
            height="92"
            inactive-color="#000000"
            font-size="28"
            name="cate_name"
            bar-width="112"
            bar-height="4"
            :bar-style="barStyle"
            count="cate_count"
            :list="fansTabsList"
            :is-scroll="false"
            :current="fansOptions"
            @change="fansOptionsChange"
          ></u-tabs>
        </view>
      </view>
      <scroll-view
        :class="!searchInputType?'layout_con_box_two':'layout_con_box'"
        :refresher-enabled="refresherType"
        @refresherrefresh="scrolltoupperFn"
        :refresher-triggered="refresherTriggered"
        scroll-y="true"
        @scrolltolower="scrolltolowerFn"
        -webkit-overflow-scrolling="touch"
        scroll-with-animation="true"
      >
        <!-- 缺省页 -->
        <view class="not_page_box" v-if="noDataPageType">
          <view class="flex-col items-center order-default">
            <image
              src="https://image.qqpyyds.com/mpAppImg/noneImg/search_default_img.png"
              class="order-default-image"
              mode="aspectFill"
            />
            <text class="order-default-text">暂时没有粉丝哦~</text>
            <button class="flex-col items-center order-default-button" hover-class="hover" @click.stop="invitationFn">邀请好友关注一波</button>
          </view>
        </view>
        <div v-if="fansList.length > 0">
          <view class="meFocus_list" v-for="(item, index) in fansList" :key="index" @click.stop="gotoHomePage(item,index)">
            <view class="list_img">
              <image class="avatar_box" mode="aspectFill" :src="item.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" />
            </view>
            <view class="list_text">
              <view class="list_name" :key="index+item.followStatus"><text class="communityName_box">{{item.communityName}}</text><span class="list_open" v-if="item.followStatus==2">互</span><span class="list_help" v-if="item.isHead==1">帮</span></view>
              <div class="list_text_msg">
                <view class="list_fans"><em>跟团{{item.followGroupAmount || 0}}元</em><em>成员{{playvolumeFn( item.memberCount || item.fansCount) || 0}}</em><em v-if="item.isHead==1">总帮卖{{item.helpSellOrderAmount || 0}}元</em></view>
                <view class="list_record" v-if="item.lastLookTime">{{showTimeFn(item.lastLookTime)}}<em :class="{'em':true,'em_two':item.title}">查看</em>{{item.title || '了你'}}</view>
              </div>
            </view>
            <view class="list_but">
              <img src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png" alt="">
            </view>
          </view>
          <div class="notData_box" v-if="notDataType">沒有更多数据了~</div>
        </div>
      </scroll-view>
      <button class="buttonStyleNone fixedBottomBtn" hover-class="hover" @click.stop="invitationFn">邀请更多粉丝</button>
    </div>
    <div class="fixed_box" v-if="hasHelpSellShow" @click="hasHelpSellShow = false">
      <div class="publicPopup_box groups_share_center share_center_type" @click.stop="">
        <div class="share_preview">
          <div class="share_preview_title">
            <image class="preview_title_img" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/logo2_icon.png" />
            <div>速速团</div>
          </div>
          <div class="share_preview_content">{{shareObject.title.length>26?shareObject.title.slice(0,24)+'...':shareObject.title}}</div>
          <image class="share_preview_canvas" :src="shareObject.url" />
          <div class="share_mini_program_border"></div>
          <div class="share_mini_program">
            <image class="mini_program_icon" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share6_icon.png" />
            <div>小程序</div>
          </div>
        </div>
      </div>
      <div class="publicPopup_box_bt groups_share_bt safe-bottom" @click.stop="">
        <div class="groups_share_select" style="">
          <div class="share_friends">
            <button open-type="share" class="share_friends_btn_box">
              <image class="cover_image" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share3_icon.png" />
            </button>
            <div>分享给朋友</div>
          </div>
          <div class="share_friends circle_friends">
            <image @click.stop="createPosterFn()" class="cover_image" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share2_icon.png" />
            <div>生成海报</div>
          </div>
        </div>
        <div class="split_line_box"></div>
        <div class="close_share" @click.stop="hasHelpSellShow = false">取消</div>
      </div>
    </div>
    <!-- 保存到相册 -->
    <cover-view class="fixed_box" v-if="posterShareShow" @click.stop="posterShareShow=false">
      <cover-view class="poster_publicPopup" @click.stop="">
        <cover-image class="poster_share_img" mode="aspectFill" :src="posterShareData.url" />
        <cover-view class="keep_btn_box" @click.stop="saveImgFn" hover-class='hover'>保存到相册</cover-view>
      </cover-view>
    </cover-view>
    <!-- 保存到相册 -->
    <InviteToHelpSellShare ref="childInviteToHelpSellShare" @shareSuccess="shareSuccess"/>
    <HomepagePoster ref="childQueryLogisticsShare" @posterShareSuccess="posterShareSuccess"/>
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import SearchInput from "@/components/searchInput/index.vue";
import dynamic from "@/api/dynamic.js"
import share from "@/api/share.js"
import Util from "@/api/util.js";
import InviteToHelpSellShare from "@/components/shareImage/inviteToHelpSellShare.vue"
import HomepagePoster from "@/components/shareImage/homepagePoster.vue"
export default {
  name: 'fans',
  components: {PublicPage,InviteToHelpSellShare,HomepagePoster,SearchInput},
  data() {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      barStyle: {
        marginBottom: '-4rpx'
      },
      // 标签栏
      fansTabsList: [
        {
          cate_name: "成员",
        },
        {
          cate_name: "粉丝",
        },
        // {
        //   cate_name: "已关注",
        // },
        // {
        //   cate_name: "已浏览",
        // },
      ],
      fansOptions: 0,
      defaultShow: false,
      fansList: [],
      currentPage: 1,
      nickname: '',
      pageSize: 20,
      fansType: 1,
      notDataType: false,
      hasHelpSellShow: false,
      shareObject: {},
      posterShareData: {},
      posterShareShow: false,
      shareInfoData: {},
      searchInputType: true,
      noDataPageType: false,
      refresherType: true,
      refresherTriggered: false,
    }
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
  },
  onLoad () {
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
    this.getShareInfoFn()
    if (uni.getStorageSync('token')) {
      this.getMemberDataFn()
      this.getFansList()
    }
  },
  onShow () {
    if (this.getIsRefreshType()) { // 需要刷新数据
      this.setIsRefreshType(false) // 重置刷新数据
      this.searchOrderInputFn()
      this.getShareInfoFn()
    }
    if (this.$store.state.publicUpdateData && this.fansList.length) { // 处理页面去个人主页关注变动更新
      let updateData = this.$store.state.publicUpdateData
      this.fansList[updateData.index] = {
        ...this.fansList[updateData.index],
        isFollow: updateData.isFollow
      }
      this.$forceUpdate()
      this.$store.commit('PUBLIC_UPDATE_DATA', null)
    }
  },
  onShareAppMessage (res) {
    let title = this.shareObject.title
    let share_image = this.shareObject.url
    let path = `/pagesB/personalCenter/homePage?shareType=true&idCode=${this.$store.state.userInfo.idCode}`
    if (this.shareInfoData.accountId) {
      path = `/pagesB/personalCenter/homePage?accountId=${this.shareInfoData.accountId}&shareType=true&idCode=${this.$store.state.userInfo.idCode}`
    } else {
      path = `/pagesB/personalCenter/homePage?accountId=${this.$store.state.userInfo.accountId}&shareType=true&idCode=${this.$store.state.userInfo.idCode}`
    }
    if (res.from === 'button') {
      // 按钮分享
      // console.log(res.target, res)
    }
    if (res.from === 'menu') {
      // 菜单分享
      // console.log(res.target)
    }
    // 分享参数打印
    console.log(JSON.parse(JSON.stringify({
      title: title,
      imageUrl: share_image,
      path: path
    })))
    return {
      title: title,
      imageUrl: share_image,
      path: path,
      success (res) {
      },
    }
  },
  methods: {
    getMemberDataFn() { // 查询成员粉丝总数
      dynamic.getMemberData().then(res => {
        this.fansTabsList[0].cate_name = this.fansTabsList[0].cate_name+`(${this.playvolumeFn(res.data.memberCount) || 0})`
        this.fansTabsList[1].cate_name = this.fansTabsList[1].cate_name+`(${this.playvolumeFn(res.data.fansCount) || 0})`
      })
    },
    gotoHomePage (data,index) {
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${data.accountId}&index=${index}`})
    },
    getShareInfoFn () {
      share.getShareInfo({}).then(res => {
        if (res.code == 200) {
          this.shareInfoData = res.data
        }
      })
    },
    saveImgFn () {
      let this_ = this
      wx.saveImageToPhotosAlbum({
        filePath: this_.posterShareData.url,
        success: function(res) {
          wx.showToast({
            title: '保存成功',
            duration: 1000
          })
        },
        fail(err){
          console.log(err,'errerrerrerr')
          if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
            wx.showModal({
              title: '提示',
              content: '需要您授权保存相册',
              showCancel: false,
              success: modalSuccess => {
                wx.openSetting({
                  success(settingdata) {
                    console.log("settingdata", settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限成功,再次点击图片即可保存',
                        showCancel: false,
                      })
                    } else {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限失败，将无法保存到相册哦~',
                        showCancel: false,
                      })
                    }
                  },
                  fail(failData) {
                    console.log("failData", failData)
                  },
                  complete(finishData) {
                    console.log("finishData", finishData)
                  }
                })
              }
            })
          }
        }
      })
    },
    posterShareSuccess (res) {
      if (res.code == 200) {
        this.posterShareData = res
        this.posterShareShow = true
      }
    },
    createPosterFn () {
      let canvasData = {}
      canvasData = {
        bgImgUrl: this.shareInfoData.backgroundUrl || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png', // 封面大图片
        page: 'pagesB/personalCenter/homePage', // 二维码地址
        options: {
          accountId: this.shareInfoData.accountId || this.$store.state.userInfo.accountId,
          shareType: true, //所有分享链接必须带上shareType=true
        },
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.avatar,// 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.nickname,// 名字
        fansMun: this.playvolumeFn(this.shareInfoData.fansCount || 0),
        fansText: '粉丝数',
        highQualityMun: this.shareInfoData.dynamicCount || 0,
        highQualityText: '优质团购',
        watchMun: this.playvolumeFn(this.shareInfoData.browseCount || 0),
        watchText: '观看人次',
        codeText1: '长按识别关注，和我一起省钱+赚钱', // 二维码提示文案1
      }
      this.$refs.childQueryLogisticsShare.sharePosterFrends(canvasData)
    },
    shareSuccess (res) {
      if (res.code == 200) {
        this.shareObject = {
          url: res.url,
          title: `快来关注我，每天给大家分享品质好货，还有诸多优惠哦～`
        }
        this.hasHelpSellShow = true
        console.log(this.shareObject, 'this.shareObject')
      }
    },
    invitationFn () {
      let canvasData = {}
      canvasData = {
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.avatar,// 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.nickname,// 名字
        title: this.shareInfoData.introduce || this.$store.state.userInfo.introduce, // 标题
        type: 2,
        fansMun: this.playvolumeFn(this.shareInfoData.fansCount || 0),
        fansText: '粉丝数',
        highQualityMun: this.shareInfoData.dynamicCount || 0,
        highQualityText: '优质团购',
        watchMun: this.playvolumeFn(this.shareInfoData.browseCount || 0),
        watchText: '观看人次',
        btnText: '马上关注',
      }
      this.$refs.childInviteToHelpSellShare.shareFrends(canvasData)
    },
    showTimeFn (str) {
      if (str) {
        return Util.showTime(str, 1)
      } else {
        return ''
      }
    },
    // 标签切换
    fansOptionsChange (index) {
      this.fansOptions = index;
      this.fansType = this.fansOptions+1
      this.fansList = []
      this.currentPage = 1
      this.getFansList()
    },
    playvolumeFn (mun) {
      return Util.playvolume(mun)
    },
    scrolltoupperFn(){
      this.refresherTriggered = true
      this.notDataType = false
      this.fansList = []
      this.currentPage = 1
      this.getFansList()
    },
    searchOrderInputFn (e) {
      this.nickname = e
      this.fansList = []
      this.currentPage = 1
      this.getFansList()
    },
    scrolltolowerFn () {
      if (this.notDataType) return
      ++this.currentPage
      this.getFansList()
    },
    getFansList () {
      let params = {
        currentPage: this.currentPage,
        nickname: this.nickname,
        pageSize: this.pageSize,
        type: this.fansType
      }
      dynamic.getFansList(params).then(res => {
        this.searchInputType = true
        if (res.code === 200) {
          if(this.currentPage == 1){
            this.fansList = res.data.records
          }else{
            this.fansList = this.fansList.concat(res.data.records)
          }
          if (!this.nickname&&this.fansList.length<1) {
            this.searchInputType = false
          }
          this.noDataPageType = this.fansList.length<1?true:false
          if (res.data.records.length<this.pageSize) {
            this.notDataType = true
          } else {
            this.notDataType = false
          }
        } else {
          this.noDataPageType =  true
        }
        this.refresherTriggered = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.fans_page {
  width: 100vw;
  height: 100vh;
  background: #F7F8FA;
}
.fans_msg_box {
  height: 100%;
  .layout_con_box {
    height: calc(100% - 304rpx);
  }
  .layout_con_box_two {
    height: calc(100% - 204rpx);
  }
  .not_page_box {
    height: 100%;
  }
}
.u-tabs_box {
  border-bottom: 2rpx solid #eee;
}
// 搜索框
.order-main3 {
  z-index: 193;
  height: 112rpx;
  background-color: rgba(255, 255, 255, 1);
  border: 2rpx solid #eee;
  width: 750rpx;
  justify-content: center;
  align-items: flex-start;
  padding-left: 24rpx;
  display: flex;
  flex-direction: column;
}
.order-group1 {
  z-index: auto;
  width: 694rpx;
  height: 80rpx;
  flex-direction: row;
  display: flex;
  align-items: center;
  .order-search-bg {
    background: #f5f5f5;
    display: flex;
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    align-items: center;
    .order-search-icon {
      background: url("https://image.qqpyyds.com/mpAppImg/icon/search1_icon.png") 0rpx 0rpx no-repeat;
      width: 48rpx;
      height: 48rpx;
      margin: 0 20rpx;
    }
    .order-search-input {
      width: 90%;
    }
  }
  .order-search-text {
    width: 120rpx;
    font-size: 32rpx;
    color: #e44435;
    text-align: center;
  }
}
.invite_btn_box {
  width: 100%;
  background: #fff;
  border-top: 2rpx solid #eee;
  padding: 8rpx 32rpx;
  .invite_btn {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #fff;
    background: #E44435;
    border-radius: 32px;
  }
}
// 我的粉丝列表
.meFocus_list {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  flex: 1;
  // border-bottom: 2rpx solid #eee;
  // 头像
  .list_img {
    margin-right: 16rpx;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    // background: pink;
    .avatar_box {
      width: 100%;
      height: 100%;
    }
  }
  // 名字
  .list_text {
    flex: 1;
    font-size: 20rpx;
    display:flex;
    flex-flow: column; //垂直排列
    justify-content: space-between;//两端对齐
    .list_name {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      .communityName_box {
        max-width: 300rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
      }
      span {
        text-align: center;
      }
      .list_open {
        width: 28rpx;
        height: 28rpx;
        background: #dff7ed;
        border-radius: 4rpx;
        color: #00935d;
        margin-left: 8rpx;
        font-size: 20rpx;
      }
      .list_help {
        width: 28rpx;
        height: 28rpx;
        background: #ffe5de;
        border-radius: 4rpx;
        color: #e44435;
        margin-left: 8rpx;
        font-size: 20rpx;
      }
    }
    .list_text_msg {
    }
    .list_fans {
      color: #969799;
      color: #969799;
      line-height: 32rpx;
      display: flex;
      margin: 8rpx 0 0 0;
      em {
        margin-right: 10rpx;
      }
    }
    .list_record {
      width: 530rpx;
      height: 28rpx;
      margin: 8rpx 0 0 0;
      color: #969799;
      line-height: 28rpx;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      .em {
        display: inline-block;
        margin-right: 0rpx;
        &.em_two {
          margin-right: 0rpx;
        }
      }
    }
  }
  .list_but {
    display: flex;
    align-items: center;
    img {
      width: 24rpx;
      height: 24rpx;
    }
  }
  // 已粉丝的博主
  .disabled-but {
    background-color: #ffe5de;
    color: #fff;
    padding: 4rpx 20rpx;
    margin: 0;
  }
}
.notData_box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  padding: 20rpx 0;
  color: #969799;
}
.fixed_box {
  .groups_share_center {
    background: none;
    width: 520rpx;
    &.share_center_type {
      transform: translate(-50%, -70%);
    }
    .groups_share_text {
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      margin-bottom: 36rpx;
    }
  }
  .groups_share_bt {
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    .groups_share_select {
      width: 100%;
      height: 212rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .share_friends {
      display: flex;
      flex-direction: column;
      align-items: center;
      .cover_image {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 12rpx;
      }
      .share_friends_btn_box {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 12rpx;
      }
    }
    .close_share {
      height: 96rpx;
      background: #ffffff;
      // box-shadow: 0rpx 2rpx 0rpx 0rpx #f2f3f5 inset;
      font-size: 28rpx;
      color: #969799;
      text-align: center;
      line-height: 96rpx;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      &.close_share_ios {
        padding-bottom: 60rpx;
      }
    }
  }
  // 分享预览图
  .share_preview {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 20rpx 14rpx;
    &.share_preview_4 {
      width: 260px;
      height: 301px;
      margin: 0 auto 0;
      box-sizing: border-box;
    }
    .share_preview_title {
      width: 480rpx;
      font-size: 24rpx;
      color: #666666;
      display: flex;
      align-items: center;
      .preview_title_img {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
    }
    .share_preview_content {
      font-size: 32rpx;
      color: #323232;
      white-space: pre-wrap;
      width: 480rpx;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .share_preview_canvas {
      width: 100%;
      height: 384rpx;
      margin: 20rpx auto 0rpx;
    }
    .share_mini_program {
      display: flex;
      align-items: center;
      // height: 2rpx;
      // border-top: 2rpx solid #dcdee0;
      .mini_program_icon {
        width: 24rpx;
        height: 22rpx;
        margin-right: 8rpx;
      }
    }
    .share_mini_program_border {
      height: 2rpx;
      background-color: #dcdee0;
      width: 100%;
      margin: 20rpx 0;
    }
  }
}
</style>
